<template>
  <div class="date-picker-container" v-bind="$attrs" v-on="$listeners">
    <el-date-picker
      class="date-picker"
      v-model="startTime"
      :type="type"
      value-format="timestamp"
      placeholder="请选择开始时间"
      :picker-options="startTimePickerOptions"
      @change="handleStartTimeChange"
      size="small"
    />
    <span class="seperator"></span>
    <el-date-picker
      class="date-picker"
      v-model="endTime"
      value-format="timestamp"
      placeholder="请选择结束时间"
      :type="type"
      :picker-options="endTimePickerOptions"
      @change="handleEndTimeChange"
      size="small"
    />
  </div>
</template>
<script>
import dayjs from 'dayjs'

export default {
  name: 'SearchDatePicker',
  props: {
    start: {
      type: Number,
    },
    end: {
      type: Number,
    },
    disableDate: {
      type: Object,
      default: () => {
        return {}
      },
    },
    type: {
      type: String,
      default: 'date',
    },
  },
  watch: {
    start(val) {
      this.startTime = val
    },
    end(val) {
      this.endTime = val
    },
    startTime: {
      handler(val) {
        let disabledFunc = () => {}
        if (val && val !== '') {
          disabledFunc = (time) => {
            let disableRange = val > time.getTime()
            if (this.disableDate.range) {
              disableRange =
                val > time.getTime() ||
                time.getTime() >
                  val + this.disableDate.range - 24 * 60 * 60 * 1000
            } else if (this.disableDate.endTime) {
              disableRange =
                val > time.getTime() ||
                time.getTime() > this.disableDate.endTime ||
                time.getTime() < this.disableDate.startTime
            }

            if (this.disableDate.banTomorrow) {
              return (
                disableRange ||
                time.getTime() > Date.now() - this.getLimitedTime()
              )
            }

            return disableRange
          }
        } else {
          disabledFunc = (time) => {
            let disableRange =
              time.getTime() > this.disableDate.endTime ||
              time.getTime() < this.disableDate.startTime

            if (this.disableDate.banTomorrow) {
              return (
                disableRange ||
                time.getTime() > Date.now() - this.getLimitedTime()
              )
            }

            return disableRange
          }
        }

        this.$set(this.endTimePickerOptions, 'disabledDate', disabledFunc)
        if (val !== this.start) this.$emit('update:start', this.startTime)
      },
      immediate: true,
    },
    endTime: {
      handler(val) {
        let disabledFunc = () => {}
        if (val && val !== '') {
          disabledFunc = (time) => {
            let disableRange = val < time.getTime()
            if (this.disableDate.range) {
              disableRange =
                val < time.getTime() ||
                time.getTime() < val - this.disableDate.range
            } else if (this.disableDate.startTime) {
              disableRange =
                val < time.getTime() ||
                time.getTime() > this.disableDate.endTime ||
                time.getTime() < this.disableDate.startTime
            }

            if (this.disableDate.banTomorrow) {
              return (
                disableRange ||
                time.getTime() > Date.now() - this.getLimitedTime()
              )
            } else {
              return disableRange
            }
          }
        } else {
          disabledFunc = (time) => {
            let disableRange =
              time.getTime() > this.disableDate.endTime ||
              time.getTime() < this.disableDate.startTime
            if (this.disableDate.banTomorrow) {
              return (
                disableRange ||
                time.getTime() > Date.now() - this.getLimitedTime()
              )
            } else {
              return disableRange
            }
          }
        }
        this.$set(this.startTimePickerOptions, 'disabledDate', disabledFunc)
        if (val !== this.end) this.$emit('update:end', this.endTime)
      },
      immediate: true,
    },
  },
  data() {
    return {
      startTime: this.start,
      endTime: this.end,
      startTimePickerOptions: {},
      endTimePickerOptions: {},
    }
  },
  methods: {
    getLimitedTime() {
      if (this.type == 'date') return 24 * 3600 * 1000
      if (this.type == 'month') return 24 * 3600 * 1000 * dayjs().daysInMonth()
    },
    handleStartTimeChange() {
      this.$emit('change')
    },
    handleEndTimeChange(val) {
      this.$emit('change')
      if (val) this.endTime = val + 24 * 60 * 60 * 1000 - 1
    },
  },
}
</script>
<style lang="scss" scoped>
.date-picker-container {
  height: 32px;
}

.date-picker {
  width: calc(50% - 7px) !important;
  &::v-deep .el-input__inner {
    height: 32px;
  }
}
.seperator {
  display: inline-block;
  width: 14px;
  border-top: 1px solid black;
  vertical-align: middle;
}
</style>
